<template>
	<div class="div">
		<el-form
			ref="ruleFormRef"
			:model="ruleForm"
			:rules="rules"
			class="demo-ruleForm"
			:size="formSize"
			status-icon
		>
			<el-form-item label="产品名称:" prop="name">
				<el-input v-model="ruleForm.name" />
			</el-form-item>
			<el-form-item label="产品标签:" prop="label">
				<el-checkbox-group v-model="ruleForm.label">
					<el-checkbox label="消费贷款" name="type1" />
					<el-checkbox label="灵活还款" name="type2" />
					<el-checkbox label="低利息" name="type3" />
					<el-checkbox label="长期贷款" name="type4" />
					<el-checkbox label="抵押贷款" name="type5" />
					<el-checkbox label="经营贷款" name="type6" />
					<el-checkbox label="投资扩张" name="type7" />
					<el-checkbox label="企业贷款" name="type8" />
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="利息(%):" prop="interest">
				<el-input v-model="ruleForm.interest" />
			</el-form-item>
			<el-form-item label="发布机构:" prop="institution">
				<el-input v-model="ruleForm.institution" />
			</el-form-item>
			<el-form-item label="还款方式:" prop="repay">
				<el-input v-model="ruleForm.repay" />
			</el-form-item>
			<el-form-item label="最长期限(月):" prop="maxMonth">
				<el-input v-model="ruleForm.maxMonth" />
			</el-form-item>
			<el-form-item label="最高可贷额度(万):" prop="maxMoney">
				<el-input v-model="ruleForm.maxMoney" />
			</el-form-item>
			<el-form-item label="使用对象:" prop="useObject">
				<el-input v-model="ruleForm.useObject" type="textarea" autosize />
			</el-form-item>
			<el-form-item label="产品简介:" prop="introduct">
				<el-input v-model="ruleForm.introduct" type="textarea" autosize />
			</el-form-item>
			<el-form-item label="产品特点:" prop="feature">
				<el-input v-model="ruleForm.feature" type="textarea" autosize />
			</el-form-item>
			<el-form-item label="申请条件:" prop="condition">
				<el-input v-model="ruleForm.condition" type="textarea" autosize />
			</el-form-item>
			<el-form-item label="是否上架" prop="online">
				<el-switch v-model="ruleForm.online" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm(ruleFormRef)">
					发布
				</el-button>
				<el-button @click="resetForm(ruleFormRef)">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { productPost } from "../../api/product";

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
	name: "",
	label: [],
	maxMoney: "",
	interest: "",
	maxMonth: "",
	institution: "",
	repay: "",
	useObject: "",
	introduct: "",
	feature: "",
	condition: "",
	online: false,
});

const rules = reactive<FormRules>({
	name: [{ required: true, message: "请输入产品名称!", trigger: "blur" }],
	label: [{ required: true, message: "请选择产品标签!", trigger: "blur" }],
	maxMoney: [
		{ required: true, message: "请输入最高可贷额度!", trigger: "blur" },
	],
	interest: [{ required: true, message: "请输入利率!", trigger: "blur" }],
	maxMonth: [{ required: true, message: "请输入最长期限!", trigger: "blur" }],
	institution: [
		{ required: true, message: "请输入发布机构!", trigger: "blur" },
	],
	repay: [{ required: true, message: "请输入还款方式!", trigger: "blur" }],
	useObject: [{ required: true, message: "请输入使用对象!", trigger: "blur" }],
	introduct: [{ required: true, message: "请输入产品简介!", trigger: "blur" }],
	feature: [{ required: true, message: "请输入产品特点!", trigger: "blur" }],
	condition: [{ required: true, message: "请输入申请条件!", trigger: "blur" }],
	online: [{ required: true, message: "请选择是否上线!", trigger: "blur" }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			console.log("submit!");
			productPost(ruleForm).then(() => {
				history.go(0);
			});
		} else {
			console.log("error submit!", fields);
		}
	});
};

const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
};
</script>

<style scoped lang="scss">
.div {
	display: flex;
}
.el-form {
	width: 600px;
	.el-form-item {
		margin-bottom: 14px;
	}
}
// :deep(.el-form-item__label) {
// 	justify-content: center;
// }
</style>
